<template>
    <div class="qilin-QilinVueEditor">
        <div class="header">注意</div>
        <div class="content warning">因为本人项目的原因，涉及到的富文本编辑器功能比较浅，因为针对该编辑器只是封装了对应图片的粘贴和上传图片的功能，若有需求亦可留言作者，后续会研究加上定制化功能</div>
        <div class="content warning">更多功能各位大佬亦可直接去参考官方文档，附上链接https://www.ling0523.cn/vue-editify/document/29</div>
        <br>
        <br>
        <div class="header">基本使用</div>
        <div class="content">1、不可以自定义粘贴图片</div>
        <QilinVueEditify v-model:editifyConfig="editifyConfig" content="不可以自定义粘贴图片"
        ></QilinVueEditify>
        <CodeMirror :codeValue="codeValue1"></CodeMirror>
        <br>
        <br>
        <div class="content">2、可以自定义粘贴图片</div>
        <QilinVueEditify v-model:editifyConfig="editifyConfig1" content="可以自定义粘贴图片"
        ></QilinVueEditify>
        <CodeMirror :codeValue="codeValue2"></CodeMirror>
        <br>
        <br>
        <div class="header">Props</div>
        <QilinTable v-model:tableConfig="propsTableConfig"></QilinTable>
        <br>
        <br>
        <div class="header">Events</div>
        <QilinTable v-model:tableConfig="eventsTableConfig"></QilinTable>
        <br>
        <br>
        <div class="header">Exposes</div>
        <QilinTable v-model:tableConfig="exposesTableConfig"></QilinTable>
        <br>
        <br>
        <div class="header">Slots</div>
        <!-- <QilinTable v-model:tableConfig="slotsTableConfig"></QilinTable> -->
        <br>
        <br>
    </div>
</template>

<script setup>
import Qilin from "qilin-utils";

/*
    数据变量定义区域
*/


/*
    计算属性等代码区域
*/
const codeValue1=computed(()=>{
    return `
        // --html部分
        <QilinVueEditify v-model:editifyConfig="editifyConfig" content="不可以自定义粘贴图片"
        ></QilinVueEditify>
        // --js部分
        const editifyConfig=reactive({
            autoheight:true,
            autofocus:true
        });
    `
});
const codeValue2=computed(()=>{
    return `
        // --html部分
        <QilinVueEditify v-model:editifyConfig="editifyConfig1" content="可以自定义粘贴图片"
        ></QilinVueEditify>
        // --js部分
        const pasteImage=async(insertImage,file,editor)=>{
            // console.log(insertImage,file,editor);
            await Qilin.File.getFileBase64(file).then((data)=>{
                insertImage(editor,data);
            });
        };
        const editifyConfig1=reactive({
            autoheight:true,
            autofocus:true,
            customImagePaste:pasteImage
        });
    `
});


/*
    逻辑脚本代码区域
*/
const pasteImage=async(insertImage,file,editor)=>{
    // console.log(insertImage,file,editor);
    await Qilin.File.getFileBase64(file).then((data)=>{
        insertImage(editor,data);
    });
};

const editifyConfig=reactive({
    autoheight:true,
    autofocus:true
});
const editifyConfig1=reactive({
    autoheight:true,
    autofocus:true,
    customImagePaste:pasteImage
});
const propsTableConfig=reactive({
    elTableConfig:{
        border:true,
        defaultExpandAll:true,
        rowKey:"attrName",
        cellStyle:({row,column,rowIndex,columnIndex})=>{
            // console.log(row,column,rowIndex,columnIndex);
            // if((rowIndex === 8 && columnIndex === 0) ||
            //     (rowIndex === 11 && columnIndex === 0)
            // ){
            //     return {
            //         "font-weight":"bolder",
            //         color:"#2d8cf0"
            //     }
            // }
        }
    },
    headerConfig:[
        {
            label:"属性名",
            prop:"attrName",
            type:"text",
            width:180
        },
        {
            label:"类型",
            prop:"attrType",
            type:"text",
            width:120
        },
        {
            label:"说明",
            prop:"description",
            type:"text"
        },
        {
            label:"可取值",
            prop:"valuable",
            type:"text",
            replaceValue:"-"
        },
        {
            label:"默认值",
            prop:"default",
            type:"text",
            width:150
        }
    ],
    tableData:[
        {
            attrName:"content",
            attrType:"string",
            description:"富文本编辑器显示的内容，一般用于回显内容",
            valuable:"-",
            default:"-"
        },
        {
            attrName:"editifyConfig",
            attrType:"object",
            description:"富文本编辑器配置项",
            valuable:"-",
            default:"-",
            children:[
                {
                    attrName:"value",
                    attrType:"string",
                    description:"显示的内容，优先级低于content传参，content传参一般用于回显内容",
                    valuable:"-",
                    default:"-"
                },
                {
                    attrName:"placeholder",
                    attrType:"string",
                    description:"占位符",
                    valuable:"-",
                    default:"请输入内容......",
                },
                {
                    attrName:"disabled",
                    attrType:"boolean",
                    description:"是否禁用编辑器",
                    valuable:"true/false",
                    default:"false",
                },
                {
                    attrName:"autoFocus",
                    attrType:"boolean",
                    description:"是否在编辑器加载完成后自动获取焦点",
                    valuable:"true/false",
                    default:"true",
                },
                {
                    attrName:"border",
                    attrType:"boolean",
                    description:"是否显示编辑器的边框",
                    valuable:"true/false",
                    default:"true",
                },
                {
                    attrName:"autoHeight",
                    attrType:"boolean",
                    description:"编辑器是否自适应高度",
                    valuable:"true/false",
                    default:"false",
                },
                {
                    attrName:"showWordLength",
                    attrType:"boolean",
                    description:"是否显示字数统计",
                    valuable:"true/false",
                    default:"true",
                },
                {
                    attrName:"allowPasteHtml",
                    attrType:"boolean",
                    description:"是否允许粘贴携带样式的html内容",
                    valuable:"true/false",
                    default:"true",
                },
                {
                    attrName:"menu",
                    attrType:"object",
                    description:"菜单栏配置项",
                    valuable:"-",
                    default:"-",
                    children:[
                        {
                            attrName:"use",
                            attrType:"boolean",
                            description:"是否使用菜单栏",
                            valuable:"true/false",
                            default:"true",
                        },
                        {
                            attrName:"tooltip",
                            attrType:"boolean",
                            description:"是否使用工具提示",
                            valuable:"true/false",
                            default:"true",
                        },
                        {
                            attrName:"fullScreen",
                            attrType:"object",
                            description:"是否显示可全屏按钮配置",
                            valuable:"-",
                            default:"-",
                            children:[
                                {
                                    attrName:"show",
                                    attrType:"boolean",
                                    description:"是否显示按钮",
                                    valuable:"true/false",
                                    default:"true",
                                },
                                {
                                    attrName:"rightBorder",
                                    attrType:"boolean",
                                    description:"按钮是否显示在右侧边框",
                                    valuable:"true/false",
                                    default:"true",
                                },
                            ]
                        },
                    ]
                },
                {
                    attrName:"customImagePaste",
                    attrType:"function",
                    description:"自定义粘贴图片事件",
                    valuable:"(insertImage,file,editor)=>{}",
                    default:"-"
                },
                {
                    attrName:"customVideoPaste",
                    attrType:"function",
                    description:"自定义粘贴视频事件",
                    valuable:"(insertImage,file,editor)=>{}",
                    default:"-"
                }
            ]
        }
    ],
    paginationsObj:{
        isHide:true
    }
});
const eventsTableConfig=reactive({
    elTableConfig:{
        border:true
    },
    headerConfig:[
        {
            label:"事件名",
            prop:"eventName",
            type:"text",
            width:180
        },
        {
            label:"类型",
            prop:"eventType",
            type:"text",
            width:120
        },
        {
            label:"参数",
            prop:"eventValue",
            type:"text",
            width:120
        },
        {
            label:"说明",
            prop:"description",
            type:"text"
        }
    ],
    tableData:[
        {
            eventName:"success",
            eventType:"function",
            eventValue:"value",
            description:"富文本编辑器失去焦点后触发的事件，得到编辑器的内容"
        }
    ],
    paginationsObj:{
        isHide:true
    }
});
const exposesTableConfig=reactive({
    elTableConfig:{
        border:true
    },
    headerConfig:[
        {
            label:"方法名",
            prop:"exposeName",
            type:"text",
            width:180
        },
        {
            label:"类型",
            prop:"exposeType",
            type:"text",
            width:100
        },
        {
            label:"参数",
            prop:"exposeValue",
            type:"text",
            width:100
        },
        {
            label:"说明",
            prop:"description",
            type:"text"
        },
    ],
    tableData:[
        {
            exposeName:"handleBlur",
            exposeType:"function",
            exposeValue:"-",
            description:"富文本编辑器失去焦点后触发"
        },
    ],
    paginationsObj:{
        isHide:true
    }
});


/*
    生命周期等代码区域
*/

</script>

<style lang="scss" scoped>
.qilin-{

}
</style>
